<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>CRM</title>
  <link rel="icon" href="img/loginlogo.jpg" type="image/jpg">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js"></script>
  <script>
    // 清除cookie的函数
    function clearCookie(name) {
      var date = new Date();
      date.setTime(date.getTime() - 1000); // 设置为过去的时间，强制过期
      document.cookie = name + "=;expires=" + date.toUTCString() + ";path=/";
    }

    function setCookieForever(name, value) {
      var date = new Date();
      date.setTime(date.getTime() + (365 * 24 * 60 * 60 * 1000)); // 设置为一年后过期
      document.cookie = name + "=" + value + ";expires=" + date.toUTCString() + ";path=/";
    }

    function getCookie(name) {
      let cookies = document.cookie.split('; ');
      for (let i = 0; i < cookies.length; i++) {
        let parts = cookies[i].split('=');
        if (parts[0] === name) {
          return parts[1];
        }
      }
      return '';
    }

    function printCookie(name) {
      let cookieValue = getCookie(name);
      return cookieValue;
    }

    function login () {
      addMask();
      document.getElementById('loader').classList.add('active');
      document.getElementById('loginbutton').style.pointerEvents = 'none';

      var login_name = document.getElementById("login_name").value;
      var login_pwd = document.getElementById("login_pwd").value;

      var rememberUsername = document.getElementById("rememberUsername").checked;
      if (rememberUsername) {
        // 只保存用户名cookie
        setCookieForever("username", login_name);
        setCookieForever("rememberUsername", rememberUsername);
      } else {
        // 未勾选时清除用户名cookie
        clearCookie("username");
        clearCookie("rememberUsername");
      }

      fetch('/crm/getData?login_name='+encodeURIComponent(login_name)+'&login_pwd='+encodeURIComponent(login_pwd))
              .then(response => response.json())
              .then(data => {
                console.log(data);
                if (data.result == "false") {
                  document.getElementById("error").innerHTML=data.msg;
                  removeMask();
                  document.getElementById('loader').classList.remove('active');
                  document.getElementById('loginbutton').style.pointerEvents = 'auto';
                } else {
                  document.getElementById("error").innerHTML="";
                  window.location.href = data.msg;
                }
              })
              .catch(error => console.error('Unable to get data.', error));
    }

    // 添加遮罩
    function addMask() {
      var mask = document.getElementById('mask');
      mask.style.display = 'block';
    }

    // 移除遮罩
    function removeMask() {
      var mask = document.getElementById('mask');
      mask.style.display = 'none';
    }

    window.onload = function() {
      // 强制默认不勾选
      document.getElementById("rememberUsername").checked = false;

      var newWindowWidth = window.screen.width;
      var newWindowHeight = window.screen.height;
      document.body.style.width = (newWindowWidth-10)+"px";
      document.body.style.height = (newWindowHeight-190)+"px";
      removeMask();

      // 回显用户名（如果已保存）
      if (printCookie('rememberUsername') === "true") {
        document.getElementById("login_name").value = printCookie('username') || '';
        document.getElementById("rememberUsername").checked = true;
      }

      // 绑定回车登录
      document.addEventListener('keydown', function(event) {
        if (event.key === "Enter") {
          login();
        }
      });

      // 额外的防自动填充措施
      setTimeout(() => {
        document.getElementById('login_pwd').value = '';
      }, 100);
    };
  </script>
  <style>
    /* 原有样式保持不变 */
    .div1, .div2, .div4 {width:100%;}
    .topimg {padding-left: 40px;padding-top: 61px;}
    .span1 {padding-left: 108px;}
    .span2 {padding-left: 35px;}
    .div3 {width: 350px;height: 400px;background-color: #ffffff;margin-right: 14%;border-radius: 8px;text-align: center;border: 1px solid #cbcbcb;}
    .zclogo {width:40%;margin-top: 15%;}
    .login {background: #25396a !important;border:1px solid #4176BA;width:240px;height:38px;margin-top: 8%;cursor: pointer;
      color: #fff;
      font-size: 13pt;
      font-family: "Helvetica Neue Regular", "Helvetica Neue", Helvetica, sans-serif;
      text-shadow: 0px -1px 0px rgba(0,0,0,0.3);
      font-weight: 300;}
    .span1, .span2 {width: 128px;
      height: 77px;
      font-family: DingTalk JinBuTi, DingTalk JinBuTi;
      font-weight: 400;
      font-size: 64px;
      color: #328ADB;
      line-height: 75px;
      text-shadow: 2px 2px 0px #FFFFFF;
      text-align: left;
      font-style: normal;}
    .container {width: 100%;height: 100%;background-image: url('img/background.png');
      background-repeat: repeat;
      background-size: 100% 100%;}
    body {background-color: #F2F5F6;
    }
    .inputdiv {
      width: 300px;margin-left: 25px;border-color: #9e9e9e2b;height: 45px;
    }
    .inputdiv input {
      height: 30px;width: 200px;
    }
    /* 隐藏浏览器自动填充的背景色 */
    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus {
      -webkit-box-shadow: 0 0 0 1000px white inset !important;
      box-shadow: 0 0 0 1000px white inset !important;
    }
  </style>
  <script>
    window.addEventListener('resize', function() {
      document.getElementById("div1").style.width="100%";
      document.getElementById("div2").style.width="100%";
    });
  </script>
</head>
<body style="overflow: auto;">
<div id="mask"></div>
<div class="loader" id="loader"></div>
<div class="container">
  <div class="content">
    <div class="div1" id="div1">
      <img src="img/crrc_logo.png" class="topimg"/>
    </div>
    <div class="div4">
      <span style="font-weight: bold;letter-spacing: 3px;margin-left: 64%;color: #d00000;font-size: 64px;">测试环境</span>
    </div>
    <div class="div2" id="div2">
      <div style="float: left;">
        <span class="span1">虔诚</span>
        <span class="span2">实干</span>
        <span class="span2">奋斗</span>
        <span class="span2">创新</span>
      </div>
      <div class="div3" style="float: right;">
        <img src="img/zclogo.png" class="zclogo">
        <div style="margin-top: 10%">
          <!-- 使用autocomplete和其他属性防止浏览器自动填充密码 -->
          <div class="inputdiv">
            <img src="img/user188.png" width="28" height="28" title="用户名" alt="用户名">
            <input type="text" id="login_name" placeholder="用户名"
                   autocomplete="username" autocorrect="off" autocapitalize="off">
          </div>
          <div class="inputdiv">
            <img src="img/lock188.png" width="28" height="28" title="密码" alt="密码">
            <input type="password" id="login_pwd" placeholder="密码"
                   autocomplete="new-password" readonly
                   onfocus="this.removeAttribute('readonly'); this.type='password'"
                   autocorrect="off" autocapitalize="off">
          </div>
          <div style="text-align: left;margin-left: 84px;">
            <input type="checkbox" id="rememberUsername" name="rememberUsername">
            <label>记住账号</label>
          </div>
          <button class="login" id="loginbutton" onclick="login()"> 登录 </button>
          <div id="error" style="color:red;margin-top: 8%"></div>
          <div style="color:red;margin-top: 8%">非涉密系统，严禁处理国家秘密（标注秘密、机密、绝密的文件资料）</div>
        </div>
      </div>
    </div>
    <div class="div4" id="div4" style="float: left;text-align: center;padding-top: 5%;">
      <span style="font-weight: bold;letter-spacing: 3px;">销售管理数字化平台</span>
    </div>
  </div>
</div>
</body>
</html>
